<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>mamma</title>

<link rel="stylesheet" href="../js/jquery-ui-1.11.1.custom/jquery-ui.min.css">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="../css/account/home.css">
<link href="../js/animations-master/assets/css/animations.min.css" rel="stylesheet" type="text/css" media="all" />
<link rel="stylesheet" href="../js/BreakingNews/BreakingNews.css" />
<link rel="stylesheet" href="../css/account/finder.css" />
<link rel="stylesheet" href="../css/friends/friends.css" />
<link rel="stylesheet" href="../css/account/firstBaby.css">
	
<script src="../js/jquery-2.1.1.js"></script>
<script src="../js/jquery-ui-1.11.1.custom/jquery-ui.min.js"></script>
<script src="../js/chart/Chart.js"></script>
<script src="../js/animations-master/assets/js/appear.min.js" type="text/javascript"></script>
<script src="../js/animations-master/assets/js/animations.min.js" type="text/javascript"></script>
<script src="../js/BreakingNews/BreakingNews.js"></script>
<script src="../js/home/imageGallery.js"></script>
<script src="../js/home/loadMorePhoto.js"></script>
<script src="../js/home/searchMember.js"></script>
<script src="../js/imgLiquid-min.js"></script>
<script src="../js/home/firstBaby.js"></script>
<script src="../js/jquery.slimscroll.min.js"></script>


<script type="text/javascript">
/* 일지 데이터 */
var randomScalingFactor = function() {
	return Math.round(Math.random() * 100)
};
var lineChartData = {
		labels : [ "January", "February", "March", "April", "May", "June",
		           "July" ],
		           datasets : [
		                       {
		                    	   label : "My First dataset",
		                    	   fillColor : "rgba(220,220,220,0.2)",
		                    	   strokeColor : "rgba(220,220,220,1)",
		                    	   pointColor : "rgba(220,220,220,1)",
		                    	   pointStrokeColor : "#fff",
		                    	   pointHighlightFill : "#fff",
		                    	   pointHighlightStroke : "rgba(220,220,220,1)",
		                    	   data : [ randomScalingFactor(), randomScalingFactor(),
		                    	            randomScalingFactor(), randomScalingFactor(),
		                    	            randomScalingFactor(), randomScalingFactor(),
		                    	            randomScalingFactor() ]
		                       },
		                       {
		                    	   label : "My Second dataset",
		                    	   fillColor : "rgba(151,187,205,0.2)",
		                    	   strokeColor : "rgba(151,187,205,1)",
		                    	   pointColor : "rgba(151,187,205,1)",
		                    	   pointStrokeColor : "#fff",
		                    	   pointHighlightFill : "#fff",
		                    	   pointHighlightStroke : "rgba(151,187,205,1)",
		                    	   data : [ randomScalingFactor(), randomScalingFactor(),
		                    	            randomScalingFactor(), randomScalingFactor(),
		                    	            randomScalingFactor(), randomScalingFactor(),
		                    	            randomScalingFactor() ]
		                       } ]
};

/* 성장 데이터 */

var data = {
		labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
		datasets: [
		           {
		        	   label: "My First dataset",
		        	   fillColor: "rgba(220,220,220,0.2)",
		        	   strokeColor: "rgba(220,220,220,1)",
		        	   pointColor: "rgba(220,220,220,1)",
		        	   pointStrokeColor: "#fff",
		        	   pointHighlightFill: "#fff",
		        	   pointHighlightStroke: "rgba(220,220,220,1)",
		        	   data: [65, 59, 90, 81, 56, 55, 40]
		           },
		           {
		        	   label: "My Second dataset",
		        	   fillColor: "rgba(151,187,205,0.2)",
		        	   strokeColor: "rgba(151,187,205,1)",
		        	   pointColor: "rgba(151,187,205,1)",
		        	   pointStrokeColor: "#fff",
		        	   pointHighlightFill: "#fff",
		        	   pointHighlightStroke: "rgba(151,187,205,1)",
		        	   data: [28, 48, 40, 19, 96, 27, 100]
		           }
		           ]
};


/* the page is loaded */
$(document).ready(function() {
	// adopt the effect that is 'display none' to some div for fadeIn effects
	if('${memberVo.hasBaby}' == 'Y'){
		loadingInfo(1);
		$( "#datepicker" ).datepicker();
		// tab lodaing
		$(function() {
			$( "#tabs" ).tabs({
				beforeLoad: function( event, ui ) {
					ui.jqXHR.error(function() {
						ui.panel.html("불러오기에 실패하였습니다");
					});
				}
			});
		});

		$('.tabAndCalendar').css('display', 'none');
		$('.photoZone').css('display', 'none');
	}
	else {
		$('.hasNoBaby').css('display', 'none');
		$('.noPhoto').css('display', 'none');
	}
		
	photoEffect();
	breakingNews();
	profileMenu();
	firstBabyAdd();
	searchMenu();

	// fadeIn effects
	$('.profile').fadeIn('slow');
	$('.myPhoto').fadeIn('slow');
	if('${memberVo.hasBaby}' == 'Y'){
		$('.tabAndCalendar').fadeIn('slow');
		$('.photoZone').fadeIn('slow');
	}
	else{
		$('.hasNoBaby').fadeIn('slow');
		$('.noPhoto').fadeIn('slow');
	}
	
	$(".myPhoto").imgLiquid();
	$("div.writer .writerPhoto").imgLiquid();
	$("div.userPhoto").imgLiquid();
	$("div.photoComment .commentPhoto").imgLiquid();
	$("div.photoCommentList").slimscroll({
		height: '550px'
	});
});

//프로필 버튼 클릭 이벤트 & 사진 클릭 이벤트
$(function changeProfilePicture() {
	$('#profileButton').on('click',function(){
		/* window.open("/mamma/sanghyun/profileUpdateForm.action", "사진 바꾸기", "top=300,left=400,width=600,height=700,resizable=no,location=no"); */
		location.href="/mamma/sanghyun/profileUploadForm.action";
	});
});

// lodaing the baby's infomation
function loadingInfo(num){
	var html = "";
	html += '<div class="babybook"><br>';
	html += '<canvas id="canvas'+(num*2-1)+'" class="babybookGraph"></canvas></div>';
	html += '<div class="growing"><br>';
	html += '<canvas id="canvas'+(num*2)+'"  class="growingGraph"></canvas></div>';

	$('#tabs-'+num).html(html);

	/* 성장 */
	var ctx = $("#canvas"+(num*2-1)).get(0).getContext("2d");
	var myNewChart1 = new Chart(ctx).Radar(data, {
		responsive : true
	});

	/* 일지 */
	var ctx = $('#canvas'+(num*2)).get(0).getContext("2d");
	var myNewChart2 = new Chart(ctx).Bar(lineChartData, {
		responsive : true
	});
}

// photo window effect
function photoEffect(){
	$('#photoZone .photoSumnail').on('mouseenter', function(){
		var num = $(this).attr('data-photo-num');
		$('#photoZone .photoSumnail[data-photo-num='+num+']').addClass("newPhotoSumnail", 100);
		$('#photoZone .photoSumnail[data-photo-num='+num+'] img').addClass('newImagePosition', 100);
		$('#photoZone .photoSumnail[data-photo-num='+num+'] img').removeClass("imagePosition", 100);
		$('#photoZone .photoSumnail[data-photo-num='+num+'] span.date').css('display', 'block');
	});
	$('#photoZone .photoSumnail').on('mouseleave', function(){
		var num = $(this).attr('data-photo-num');
		$('#photoZone .photoSumnail[data-photo-num='+num+']').removeClass("newPhotoSumnail", 100);
		$('#photoZone .photoSumnail[data-photo-num='+num+'] img').addClass("imagePosition", 100);
		$('#photoZone .photoSumnail[data-photo-num='+num+'] img').removeClass('newImagePosition', 100);
		$('#photoZone .photoSumnail[data-photo-num='+num+'] span.date').css('display', 'none');
	});
}

// breaking news
function breakingNews(){
	$("#breakingnews").BreakingNews({
		background		:"#FFFFFF",
		title			:"<i class='fa fa-check-square-o'></i>",
		titlecolor		:"#FFF",
		titlebgcolor	:"#FF5459",
		linkcolor		:"#FF5459",
		linkhovercolor	:"#FF5459",
		fonttextsize	:16,
		isbold			:false,
		border			:"solid 2px #FF5459",
		width			:"98%",
		timer			:2000,
		autoplay		:true,
		effect			:"fade"
	});
}

// profile menu
function profileMenu() {
	$('div.info').click(function(){
		$('#profileMenu').toggle();	
	});
}

// request
function request(email){
	$.ajax({
		url: "sendRequest.action"
		, type: "POST"
		, dataType: "json"
		, data: {
			email: email
		}
		, success: function(){
			var html = '<i class="fa fa-check-square"></i> 요청 완료';
			$('button.requestButton').html(html);
			$('button.requestButton').css('background-color', '#FF5459');
			$('button.requestButton').css('color', 'white');
			$('button.requestButton').css('border', '0');
			$('button.requestButton').click(false);
		}
	});
}

</script>
<style type="text/css">
#photoViewMain {
	width: 1024px;
	height: 600px;
	position: fixed;
	z-index: 1500;
	visibility: hidden;
}
.background {
	position: fixed;
	top: 0; left: 0;
	width: 100%; height: 100%;
	z-index: 6;
	background-color: rgba(0,0,0,0.5)
}

div.photoView{
	height: 600px;
	width: 600px;
	background-color: black;
	float: left;
}
div.photoView .dis { display: none; }
div.photoView:hover .dis { display: block; }
div.photoView img{
	max-height: 600px;
	max-width: 600px;
}
div.photoView .photoPrev {
	background-color: rgba(0,0,0,0.5);
	position: absolute;
	margin-top: -340px;
	margin-left: 5px;
	width: 50px; height: 65px;
	color: lightgray;
	font-size: 40pt;
	text-align: center;
	padding-top: 15px;
}
div.photoView .photoNext {
	background-color: rgba(0,0,0,0.5);
	position: absolute;
	margin-top: -340px;
	margin-left: 545px;
	width: 50px; height: 65px;
	color: lightgray;
	font-size: 40pt;
	text-align: center;
	padding-top: 15px;
}
div.photoComment {
	background-color: white;
	width: 424px;
	height: 600px;
	float: left;
}
div.photoCommentList{
	position: relative;
	width: 424px;
	height: 550px;
	overflow-x: hidden;
    overflow-y: auto;
    z-index: 10;
}
div.commentListFrame {
	margin: 0 auto;
	margin-top: 20px;
	width: 373px;
}
div.writer { height: 50px; }
div.writer .writerPhoto{
	float: left;
	height: 50px; width: 50px;
}
div.writer .writerPhoto img {
	max-height: 50px;
	max-width: 50px;
}

div.writer .writerInfo {
	float: left;
	padding-top: 10px;
	padding-left: 10px;
}

div.writer .writerInfo .writerName{
	font-size: 10pt; color: black; font-weight: bold;
}
div.writer .writerInfo .writerInputdate {
	font-size: 9pt; color: gray; font-weight: bold;
}
div.photoContent {
	padding-top: 20px;
	padding-bottom: 20px;
	padding-left: 5px;
	padding-right: 5px;
	font-size: 11pt;
}
div.contentLike, div.contentLoad, div.oneComment {
	height: 20px;
	background-color: #FFD4E2;
	border-top: 1px solid white;
}
div.contentLike, div.contentLoad {
	font-size: 9pt;
	padding-left: 10px;
	padding-top: 3px;
	padding-right: 10px;
}
div.contentLike a, div.contentLoad {
	color: navy;
}
div.oneComment { min-height: 40px; }
div.userProfile {
	float: left;
	width: 40px;
	min-height: 40px;
}
div.userPhoto {
	position: absolute;
	margin-top: 3px;
	margin-left: 3px;
	width: 34px; height: 34px;	
}
div.userPhoto img { max-height: 34px; max-width: 34px; }
div.commentContent {
	float: left;
	width: 323px;
	min-height: 30px;
	padding: 5px 5px 5px 5px;
	font-size: 10pt;
}
div.commentContent .userName {
	color: navy;
	font-weight: bold;
}



div.photoComment .addComment {
	float: left;
	height: 49px;
	width: 424px;
	z-index: 11;
	border-top: 1px solid lightgray;
}
div.photoComment .commentPhotoFrame{
	float: left;
	height: 50px; width: 50px;
}
div.photoComment .commentPhoto {
	position: absolute;
	margin-top: 8px;
	margin-left: 8px;
	width: 34px; height: 34px;
}
div.photoComment .commentPhoto img {
	max-height: 34px;
	max-width: 34px;
}
div.photoComment .commentInput{
	float: left;
	width: 373px; height: 42px;
	padding-top: 8px;
}
.commentInput input[type="text"]{
	width: 290px;
	height: 30px;
	padding-left: 5px;
	padding-right: 5px;
}
.commentInput button{
	height: 35px;
	width: 50px;
	border: 0;
	background-color: #FF5459;
	color: white;
}
</style>
</head>
<body>
<h2>메인페이지</h2>
<!-- 헤더 부분 -->
<div id="header">
	<div class="mainForm header">
		<div class="home">
		</div>
		<div class="logo">
		<s:if test="%{loginId == memberVo.email}">
			<a href="goHome.action?email=<s:property value="loginId"/>">
				<i class="fa fa-heart"></i>
			</a>
		</s:if>
		<s:else>
			<a href="goLoginPage.action">
				<i class="fa fa-heart"></i>
			</a>
		</s:else>
		</div>
		<div class="find">
		<s:if test="%{loginId == memberVo.email}">
			<input type="text" placeholder="친구를 찾으세요" />
			<div class="searchIcon">
				<i class="fa fa-search"></i>
			</div>
			<div class="searchResult">
				<div class="searchLoading">
					<img src="../image/signup/ajax-loader.gif" />
					<span>검색결과가 없습니다</span>
				</div>
				<div class="showResult"></div>
			</div>
		</s:if>
		</div>
		<div class="info"><i class="fa fa-user"></i></div>
	</div>
	<!-- profile menu -->
	<div class="mainForm">
		<div id="profileMenu">
			<ul>
				<li><a href="goFindFriend.action">친구 찾기</a></li>
				<li><a href="logout.action">로그아웃</a></li>
			</ul>
		</div>
	</div>
</div>
<!-- 메인 콘텐츠 부분 -->
<div id="home">
	<div class="mainForm content mainHome">
		<!-- 사진을 보여주는 곳 -->
		<div class="profile">
			<div class="myPhoto">
			<s:if test='%{savedFile != null || !savedFile.equals("")}'>
				<img id="profilePicture" src="../photoData/${savedFile}" />
			</s:if>
			<s:else>
				<img id="profilePicture" src="../image/profile.png"  />
			</s:else>
			</div>
			<s:if test="%{loginId == memberVo.email}">
				<br><input id="profileButton" type="button" value="${memberVo.name}의 프로필" />
			</s:if>
			<s:elseif test="%{loginId != null}"><br>
				<s:if test="%{friendVo.status == 1}">
					<button class="requestButton weAreFriends" >
						<i class="fa fa-users"></i> 친구 사이
					</button>
				</s:if>
				<s:elseif test="%{friendVo.requestEmail == loginId}">
					<button class="requestButton done">
						<i class="fa fa-check-square"></i> 요청 완료
					</button>
				</s:elseif>
				<s:elseif test="%{friendVo.email == loginId}">
					<button class="requestButton recieve"
						onclick='location.href="goFindFriend.action"'>
						<i class="fa fa-check-square"></i> 요청 받음
					</button>
				</s:elseif>
				<s:else>
					<button class="requestButton" 
						onclick="javascript:request('<s:property value='memberVo.email' />')">
						<i class="fa fa-plus-square"></i> 친구 요청
					</button>
				</s:else>
			</s:elseif>
	    </div>
		<!-- 프로필 사진 아래 글 등을 보여주는 곳 -->
		<div class="profile2">
			<!-- 이름과 좌우명 같은 걸 보여주는 곳 -->
			<div class="namespace">
				<span class="name">${memberVo.name} <span class="nickname">(${memberVo.nickname})</span></span><br><br>
				<span class="message">무럭무럭 자라는 우리 아이들의 모습 :)</span>
			</div>
			<!-- 프로필 오른쪽 버튼 3개 -->
			<div id="radio">
			    <div class="radio1">
			    	<br>
			    	<label for="radio1">친구</label><br>
			    	1234
			    	<br>
			    </div>
			    <div class="radio2">
			    	<br>
			    	<label for="radio2">Choice 2</label><br>
			    	1234
			    	<br>
			    </div>
			    <div class="radio3">
			    	<br>
			    	<label for="radio3">Choice 3</label><br>
			    	1234
			    	<br>
			    </div>
		  	</div>
		</div>
	</div>
	<div class="mainForm graph mainHome"><br>
	
	<!-- this area is showing babies' status -->
	
		<s:if test='%{memberVo.hasBaby=="N"}'>
			<!-- if the user doesn't have any babies, this area will appear.('N' means No) -->
			<div class="hasNoBaby">
				<s:if test="%{loginId == memberVo.email}">
					<div class="firstBabyBook">
						<i class="fa fa-plus-square-o"></i><br>
						<span class="firstBabyBook">육아일지<br>
						시작하기</span>
					</div>
				</s:if>
				<s:else>
					<div class="otherUserAccess">
						<span class="firstBabyBook">등록된 글이<br>
						없습니다</span>
					</div>
				</s:else>
			</div>
			<div class="addYourBaby">
				<jsp:include page="../../testPage/babyInfoWrite.jsp"></jsp:include>
			</div>
		</s:if>
		<s:else>
			<!-- if the user has babies, this area will appear. -->
			<div class="tabAndCalendar">
				<div id="tabs">
					<!-- 탭을 표현해주는 곳 -->
					<ul>
						<li onclick="javascript:loadingInfo(1)"><a href="#tabs-1">첫째</a></li>
						<li onclick="javascript:loadingInfo(2)"><a href="#tabs-2">둘째</a></li>
					</ul>
					<!-- 탭이 구현되는 곳: ajax로 불러오므로 div만 필 -->
					<div id="tabs-1" class="graphAll"></div>
					<div id="tabs-2" class="graphAll"></div>
				</div>
				<span class="graphTitle calendar">일정</span>
				<div id="datepicker"></div>
			</div> <!-- end of div named 'tabs'  -->
		</s:else>
		<br>
		
		<!-- the info div like breaking news -->
		<s:if test="%{loginId == memberVo.email}">
			<div class="BreakingNewsController easing" id="breakingnews">
	        	<div class="bn-title"></div>
	            <ul>
	                <li>1. Lorem Ipsum is simply dummy text of the printing and typesetting industry</li>
	                <li>2. It is a long established fact that a reader will be distracted</li>
	                <li>3. Many desktop publishing packages</li>
	                <li>4. All the Lorem Ipsum generators on the Internet tend to repeat predefined</li>
	                <li>5. The standard chunk of Lorem Ipsum used</li>
	                <li>6. English versions from the 1914 translation by H. Rackham.</li>
	                <li>7. Bu metin deneme amaçlıdır  the standard chunk of Lorem Ipsum used</li>
	            </ul>
	            <div class="bn-arrows"><span class="bn-arrows-left"></span><span class="bn-arrows-right"></span></div>	
	        </div>
	        <br>
        </s:if>
        
		<!-- this area is showing the user's photos -->
		<s:if test='%{photoList.size() != 0 && photoList != null}'>
			<script type="text/javascript">
				$('#home').css('height', '740px');			
			</script>
			<div class="noPhoto">
					<div class="firstPhoto">
						<s:if test="%{loginId == memberVo.email}">
							<i class="fa fa-camera-retro"></i><br>
							<span class="firstPhoto">소중한 순간<br>
							기억하기</span>
						</s:if>
						<s:else>
							<span class="firstPhoto">등록된 사진이<br>
							없습니다</span>
						</s:else>
					</div>
			</div>
			<br>
		</s:if>
		<s:else>
			<div id="photoZone">
					<ul>
						<s:iterator id="photoList">
							<li>
								<a title="The Cleaner" href="javascript:openPhoto(1)">
									<div class="imageWindow">
										<div class="photoSumnail animate-in" data-photo-num="1" data-anim-type="bounce-in-up">
											<img class="imagePosition" src="http://itrocks.biteus.org/wp-content/uploads/2006/10/top_10_cutest_asian_baby_faces_3.jpg">
											<span class="date"><br>2014년 10월 3일</span>
										</div>
									</div>
								</a>
							</li>
							<li>
								<a title="The Cleaner" href="javascript:openPhoto(2)">
									<div class="imageWindow">
										<div class="photoSumnail animate-in" data-photo-num="2" data-anim-type="bounce-in-up">
											<img class="imagePosition" src="http://itrocks.biteus.org/wp-content/uploads/2006/10/top_10_cutest_asian_baby_faces_3.jpg">
											<span class="date"><br>2014년 10월 3일</span>
										</div>
									</div>
								</a>
							</li>
						</s:iterator>
					</ul>
					<hr class="photoLine"><!-- line -->
				<div id="loadMore">
					<a href="javascript:loadMore()">더 불러오기</a>
				</div>
			</div><!-- div photoZone  -->
		</s:else>
		
		<div id="footer">
				소개 지원 블로그 관련기사 API 채용정보 공개범위 약관
		</div>
	</div>

		<!-- 	<div class="loading">
		<input type="button" value="TEST CLOSE" onclick="javascript:completeAdd()" />
	</div> -->
</div>

	<!-- photo dialog -->
	<div id="photoViewMain">
		<div class="photoView">
			<img src="http://i.imgur.com/rhXTTZT.jpg">
			<a class="dis" href="">
				<div class="photoPrev"><i class="fa fa-chevron-left"></i></div>
			</a>
			<a class="dis" href=""><div class="photoNext">
				<i class="fa fa-chevron-right"></i></div>
			</a>
		</div>
		
		
		<div class="photoComment">
			<!-- comment list -->
			<div class="photoCommentList">
				<div class="commentListFrame">
					<div class="writer">
						<div class="writerPhoto">
							<s:if test='%{savedFile != null || !savedFile.equals("")}'>
								<img id="profilePicture" src="../photoData/${savedFile}" />
							</s:if>
							<s:else>
								<img id="profilePicture" src="../image/profile.png"  />
							</s:else>
						</div>
						<div class="writerInfo">
							<span class="writerName">이름</span><br>
							<span class="writerInputdate">2014년 10월 19일</span><br>
						</div>
					</div>
					<div class="photoContent"><!-- photo content here -->content<br>content</div>
					<div class="contentLike">
						<i class="fa fa-thumbs-o-up"></i> <a href="">4명</a>이 이 사진을 좋아합니다.
					</div>
					<div class="contentLoad">
						<i class="fa fa-comments-o"></i> <a href="">더보기</a>
					</div>
					<div class="thisComment">
						<div class="oneComment">
							<div class="userProfile">
								<div class="userPhoto">
									<s:if test='%{savedFile != null || !savedFile.equals("")}'>
										<img id="profilePicture" src="../photoData/${savedFile}" />
									</s:if>
									<s:else>
										<img id="profilePicture" src="../image/profile.png"  />
									</s:else>
								</div>
							</div>
							<div class="commentContent">
								<a href=""><span class="userName">이름</span></a>
								<span class="userContent">내용내용내용내용</span>
							</div>
						</div>
					
					</div>
				</div>
			</div>
			
			<!-- add comment -->
			<div class="addComment">
				<div class="commentPhotoFrame">
					<div class="commentPhoto">
						<s:if test='%{savedFile != null || !savedFile.equals("")}'>
							<img id="profilePicture" src="../photoData/${savedFile}" />
						</s:if>
						<s:else>
							<img id="profilePicture" src="../image/profile.png"  />
						</s:else>
					</div>
				</div>
				<div class="commentInput">
					<input type="text" placeholder="댓글을 입력하세요" />
					<button id="commentInput">
						<label for="commentInput">
							등록
						</label>
					</button>
				</div>
			</div>
		</div>

	</div>
	<div id="back"></div>
</body>
</html>